<template>
    <div class="img-wrapper container-channel">
        <router-link to="/album" 
            v-if="activeTab === 'piclive'"
            class="to-album" 
            :style="'transform: translateX('+buttonX+'px)'"
        >进入相册</router-link>

        <van-list
            v-model="loading"
            :finished="finished && images.length == 0"
            class="img-list"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <div class="tip-empty text-center">
                <img src="../img/pic-type-empty.png" style="width: 50px;">
                <p>暂无数据</p>
            </div>
            <!-- <div class="img-item" 
                v-for="n in 15"
                :key="n"
            >
                <img src="../img/picture.jpeg" alt="" @click="previewImg('../img/picture.jpeg')">
            </div> -->
        </van-list>


        <!-- <van-image-preview
            v-model="showImgPreview"
            :images="images"
        >
        </van-image-preview> -->
    </div>
</template>

<script>
import {ImagePreview} from 'vant';
import { setTimeout } from 'timers';
export default {

    components: {},
    props: ['translateX','activeTab'],
    data() {
        return {
            showImgPreview: false,
            images: [],
            loading: false,
            finished: false
        };
    },
    computed: {
        // 进入相册按钮位置
        buttonX(){ return Math.abs(this.translateX); }
    },
    methods: {
        previewImg(url){
            let showUrl = 'https://img.yzcdn.cn/vant/apple-3.jpg';
            const instance = ImagePreview({
                images: [showUrl],
            });
        },
        onLoad(){
            //this.loading = false;
            setTimeout(()=>{
                this.finished = true;
                this.loading = false;
            }, 2000)
        }
    },
    created() {},
    mounted() {}
};
</script>
<style lang="scss" scoped>
.img-wrapper {
    height: 100%;
    position: relative;
    overflow: hidden;
    overflow-y: auto;

    .to-album {
        height: 54px;
        padding: 0 24px 0 32px;
        font-size: 24px;
        color: #fff;
        line-height: 54px;
        background-color: rgba(0,0,0, .5);
        border-radius: 24px;
        position: fixed;
        left: -20px;
        bottom: 90px;
        z-index: 50;
    }
}

.img-list {
    box-sizing: border-box;
    display: flex;
    padding: 0 4px;
    flex-wrap: wrap;  
}

.img-item {
    width: 33.33%;
    height: 33.33vw;
    padding: 4px;
}

.tip-empty {
    width: 100%;
    margin-top: 50px;
    text-align:  center;
    img {
        width: 90px;
    }

    p {
        font-size: 24px;
        color: #666;
        line-height: 48px;
    }

    .van-list__finished-text {
        width: 100%;
    }
}
</style>